<template>
  <div class="box">
    <!-- 1. 返回顶部 -->
    <div class="top">
      <el-button @click="dialog = true" style="background:#34bfa3;color: #FFFFFF;" round>模板语句</el-button>
    </div>
    <el-drawer
      title="模板语句库"
      :before-close="handleClose"
      :visible.sync="dialog"
      direction="ltr"
      custom-class="demo-drawer"
      ref="drawer">
      <div style="padding: 10px">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="个人" name="first">
            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
              <el-form-item label="语句内容" prop="content">
                <el-input
                  v-model="queryParams.content"
                  placeholder="请输入语句内容"
                  clearable
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
              </el-form-item>
            </el-form>
            <el-table
              v-loading="loading"
              :data="userStatementList"
              border
              style="width: 100%">
              <el-table-column label="序号" type="index" width="50" align="center"/>
              <!--            <el-table-column prop="category" label="模板分类" width="100"></el-table-column>-->
              <el-table-column prop="content" label="语句内容"></el-table-column>
              <el-table-column label="操作" width="80">
                <template slot-scope="scope">
                  <el-button type="text" size="small" @click="copy(scope.row.content)">复制</el-button>
                </template>
              </el-table-column>
            </el-table>
            <pagination
              v-show="utotal>0"
              :total="utotal"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="getListByUser"
            />
          </el-tab-pane>
          <el-tab-pane label="团队" name="second">
            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
              <el-form-item label="语句内容" prop="content">
                <el-input
                  v-model="queryParams.content"
                  placeholder="请输入语句内容"
                  clearable
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
              </el-form-item>
            </el-form>
            <el-table
              v-loading="loading"
              :data="deptStatementList"
              border
              style="width: 100%">
              <el-table-column label="序号" type="index" width="50" align="center"/>
              <!--            <el-table-column prop="category" label="模板分类" width="100"></el-table-column>-->
              <el-table-column prop="content" label="语句内容"></el-table-column>
              <el-table-column label="操作" width="80">
                <template slot-scope="scope">
                  <el-button type="text" size="small" @click="copy(scope.row.content)">复制</el-button>
                </template>
              </el-table-column>
            </el-table>
            <pagination
              v-show="dtotal>0"
              :total="dtotal"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="getListByDept"
            />
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import {listStatement, listStatementByDept, listStatementByUser} from "@/api/gaoxin/statement";
import {getUserProfile} from "@/api/system/user";

export default {
  data(){
    return{
      dialog: false,
      tableData: [],
      userStatementList: [],
      deptStatementList: [],
      loading: true,
      // 个人总条数
      utotal: 0,
      // 团队总条数
      dtotal: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        category: null,
        content: null,
        userId: null,
        deptId: null,
      },
      // 用户信息
      user: {},
      // 标签页
      activeName: 'first',
    }
  },
  created() {
    // this.getList();
    this.getListByUser();
    this.getListByDept();
  },
  methods: {

    getListByUser() {
      this.loading = true;
      getUserProfile().then(response => {
        this.user = response.data;
      }).then(() => {
        this.queryParams.userId = this.user.userId;
        // console.log(this.queryParams.userId)
        // console.log(this.queryParams.userId)
        listStatementByUser(this.queryParams).then(response => {
          this.userStatementList = response.rows;
          // console.log("userStatementList",this.userStatementList)
          this.utotal = response.total;
          this.loading = false;
        });
      });
    },

    getListByDept() {
      this.loading = true;
      getUserProfile().then(response => {
        this.user = response.data;
      }).then(() => {
        this.queryParams.deptId = this.user.deptId;
        listStatementByDept(this.queryParams).then(response => {
          this.deptStatementList = response.rows;
          // console.log("deptStatementList",this.deptStatementList)
          this.dtotal = response.total;
          this.loading = false;
        });
      });
    },

    handleClose() {
      this.dialog = false;
    },
    copy (data) {
      let input = document.createElement('input')
      input.value = data
      input.id = 'creatDom'
      document.body.appendChild(input)
      input.select()
      document.execCommand('copy')
      document.body.removeChild(input)
      this.$modal.msgSuccess("已复制到粘贴板");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getListByUser();
      this.getListByDept();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    handleClick(tab, event) {
      // console.log(tab, event);
    }
  }
}
</script>

<style lang="scss" scoped>
.box{
  position: relative;
  .top{
    position: fixed;
    right: 20px;
    bottom: 60px;
    padding: 20px;
  }
}
</style>
